<template>
  <a-popover placement="bottom" trigger="click" v-model:visible="visible">
    <template v-slot:content>
      <div style="width: 300px">
        <a-input-search style="margin-bottom: 8px" placeholder="输入关键字" @change="onChange" />
        <a-tree
          :tree-data="treeData"
          :replaceFields="replaceFields"
          v-model:expandedKeys="selectedKeys"
          @select="handleSelect"
        />
        <div style="display: flex; justify-content: space-between">
          <div></div>
          <a-button type="primary" @click="handleQuery" style="margin-left: 80%">查询</a-button>
        </div>
      </div>
    </template>
    <a href="javascript:;" class="selecticon">
      <div class="triangle"></div>
    </a>
  </a-popover>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    title: {
      type: String,
      default: () => {
        return '设置统计';
      },
    },
    checkedKeysList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    replaceFields: {
      type: Object,
      default: () => {
        return { children: 'children', title: 'name', key: 'code' };
      },
    },
  },
  emits: ['handleClick'],
  setup(props, context) {
    const selectedKeys = ref<any[]>([]);
    const selectKey = ref<any>([]);
    const autoExpandParent = ref(true);
    const visible = ref<boolean>(false);
    const gDate = ref<any>([
      {
        name: '全选',
        key: '0',
        children: [],
      },
    ]);
    //tree搜索
    const treeData = ref<any>([
      {
        name: '全选',
        key: '0',
        code: '0',
        children: [],
      },
    ]);
    const newtreeData = ref<any>([
      {
        name: '全选',
        key: '0',
        code: '0',
        children: [],
      },
    ]);
    const checkedKeys = ref<any>([]);
    const name = ref<string>('');
    //展开KEY
    let defaultExpandedKeys = ref<any>(['0']);
    const onChange = e => {
      gDate.value = [];
      if (e.target.value.length > 0) {
        treeForEch(e.target.value, treeData.value);
      } else {
        treeData.value = newtreeData.value;
        defaultExpandedKeys.value = ['0'];
      }
    };
    //搜索方法
    const treeForEch = (title, arr) => {
      arr.forEach(item => {
        if (item.name.indexOf(title) > -1) {
          defaultExpandedKeys.value = [];
          defaultExpandedKeys.value.push(item.key);
          gDate.value.push(item);
          return;
        }
        if (item.children && item.children.length > 0) {
          treeForEch(title, item.children);
        }
      });
      treeData.value = gDate.value;
    };
    //点击查询
    const newtreeDataEach = ref<any>([]);
    const handleQuery = () => {
      selectedKeys.value.push(checkedKeys.value[0]);
      let arr: any = [];
      newtreeDataEach.value = newtreeData.value;
      selectedKeys.value.forEach(item => {
        newtreeDataEach.value.forEach(el => {
          if (el.code == item) {
            arr.push({
              name: el.name,
              vcode: el.code,
            });
            newtreeDataEach.value = el.children;
          }
        });
      });
      context.emit('handleClick', checkedKeys.value[0], arr);
      arr = [];
      selectedKeys.value = [];
      visible.value = false;
    };
    const onExpand = expandedKey => {
      defaultExpandedKeys.value = expandedKey;
    };
    const handleSelect = value => {
      newtreeDataEach.value = newtreeData.value;
      checkedKeys.value = value;
    };
    watch(
      () => props.data,
      () => {
        treeData.value = props.data;
        newtreeData.value = props.data;
      },
      {
        deep: true,
        immediate: true,
      },
    );

    watch(
      () => props.checkedKeysList,
      () => {
        checkedKeys.value = props.checkedKeysList;
        selectedKeys.value = props.checkedKeysList;
      },
      {
        deep: true,
      },
    );
    return {
      onExpand,
      selectedKeys,
      onChange,
      visible,
      gDate,
      treeData,
      checkedKeys,
      handleQuery,
      defaultExpandedKeys,
      autoExpandParent,
      handleSelect,
      name,
      newtreeDataEach,
      selectKey,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-tree) {
  height: 270px;
  overflow: auto;
}
.selecticon {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: block;
  width: 20px;
  height: 20px;
  background: #35373e;
  border-radius: 1px;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.16);
  .triangle {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 0;
    height: 0;
    border-color: #347ee1 transparent; /*上下颜色 左右颜色*/
    border-style: solid;
    border-width: 0 0 12px 12px;
  }
}
</style>
